<script type="text/html" template>
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/reset.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/plan.css">
    <link rel="stylesheet" href="{{ layui.setter.base }}style/css/patrol/project_device_alert.css">
    <script src="{{ layui.setter.base }}js/common.js"></script>
</script>

<style>
    /* table thead tr th, */
    td .t {
        /* height: 30px; */
        width: 1%;
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        /*规定段落的文本不进行换行*/
        overflow: hidden;
        /*超出隐藏*/
        text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  IE*/
        -moz-text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  火狐*/
    }

    td .t1 {
        /* height: 30px; */
        width: 20%;
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        /*规定段落的文本不进行换行*/
        overflow: hidden;
        /*超出隐藏*/
        text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  IE*/
        -moz-text-overflow: ellipsis;
        /*隐藏的字符用省略号表示  火狐*/
    }

    table {
        table-layout: fixed;
        /*table的内部布局固定大小，才可以通过td的width控制宽度*/
        word-wrap: break-word;
        /*允许长单词换到下一行*/
    }
</style>

<div class="layui-containner">
    <div class="layui-fluid">
        <div class="layui-title">工单详细信息</div>
        <ul class="box layui-row" style="overflow:visible;">
            <li class="layui-col-md4 layui-col-sm4">
                <div>保养工单名称：<span></span></div>
                <div>工单状态：创建</div>
                <div>保养计划名称：
                    <input type="text" id="MaintenancePlan" autocomplete="off" style="cursor:pointer;">
                </div>
            </li>
            <li class="layui-col-md4 layui-col-sm4">
                <div>保养负责人:<span></span></div>
                <div>保养开始时间：<input type="text" id="startTime" autocomplete="off"></div>
                <div>保养截至时间：<input type="text" id="endTime" autocomplete="off"></div>
            </li>
            <li class="layui-col-md4 layui-col-sm4">
                <div>位置范围：<span></span></div>
                <div>保养说明：<span></span></div>
            </li>
        </ul>
    </div>
    <div class="layui-fluid">
        <div class="layui-title">
            <span class="layui-title-inner">设备基本信息</span>
        </div>
        <table class="layui-table" lay-size="sm">
            <thead>
                <tr>
                    <th>设备编号</th>
                    <th>设备名称</th>
                    <th>设备类型</th>
                    <th>供应商</th>
                    <th>设备系列</th>
                    <th>设备型号</th>
                    <th style="width: 50%;">保养项目</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <footer class="footer layui-btn-containner">
            <button class="footer-btn layui-btn layui-btn-radius layui-btn-primary submit layui-bg-red">提交</button>
            <button class="footer-btn layui-btn layui-btn-radius layui-btn-primary submit1 layui-bg-blue">保存</button>
            <button class="footer-btn layui-btn layui-btn-radius layui-btn-primary cancel"
                lay-href="maintain/cash">取消</button>
        </footer>
    </div>
</div>
<script type="text/html" id="addDeviceTpl">
    <div class="leon-style-alert">
      <div class="layui-alert-box">
        <div class="layui-alert-title">
          <span class="layui-title-inner">巡检计划名称选择</span>
          <span class="layui-title-screen">
            <div class="screen-btn">
              <form class="layui-form" action="">
                <input type="search" name="value" class="search-blank-inner searchInput" placeholder="搜索" autocomplete="off"/>
                <button type="button" lay-submit lay-filter="queryTableDeviceHeader" class="search-blank-icon"></button>
              </form>
            </div>
          </span>
        </div>
        <div class="layui-content">
          <table class="layui-table" id="table-device-alert"></table>
        </div>
        <div class="footer layui-btn-containner">
          <button class="btn1 layui-btn layui-btn-radius layui-btn-primary" lay-submit lay-filter="queryTableDevice" >添加</button>
          <button class="btn2 layui-btn layui-btn-radius layui-btn-primary">取消</button>
        </div>
      </div>
    </div>
</script>
<script>
    layui.use(["form", "api", "utill", "view", "upload", "laydate", "laytpl", "view", "admin", "layer", "element", "table", "treeSelect"], function () {
        var api = layui.api;
        var form = layui.form;
        var view = layui.view;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var view = layui.view;
        var admin = layui.admin;
        var layer = layui.layer;
        var $ = layui.$;
        var table = layui.table;
        var setter = layui.setter;
        var element = layui.element;
        var treeSelect = layui.treeSelect;
        var utill = layui.utill;

        $('[data-jump="maintain/cash"]').addClass('layui-this').attr('color', '#FFF');
        form.render();   
        var startTime = laydate.render({
            elem: '#startTime'
            ,type: 'datetime' //时间格式：yyyy/MM/dd HH:mm:ss
            ,done: function(value, date, endDate) {
                endTime.config.min='1900-1-1';
                    startTime.config.max=endTime.config.max;
                endTime.config.min = {
                    year: date.year,
                    month: date.month - 1,//重点！！！
                    date: date.date,
                    hours:date.hours, 
                    minutes:date.minutes, 
                    seconds:date.seconds
                }
                var stime = new Date(Date.parse(value.replace("-", "/")));            
                var etime = new Date(Date.parse($("#endTime").val().replace("-", "/")));   
                if(stime>etime){ 
                    $("#endTime").val(value);
                }
            }
        });
        var endTime = laydate.render({
            elem: '#endTime'
            ,type: 'datetime'
            ,min: $("#startTime").val(),
            done: function(value, date, endDate) {
                endTime.config.min='1900-1-1';
                    startTime.config.max=endTime.config.max;
            }
        });
        var alertEvent = {
        addDevice: function (layero, index) {
          table.render(
            $.extend({}, utill.tableOpts(), {
              elem: "#table-device-alert",
              id: "#table-device-alert",
              height: 300,
                parseData: function (res) { //res 即为原始返回的数据
                        if (res.code == -2) {
                            layer.msg('对不起你没有权限');
                        }
                        return {
                            "code": res.code, //解析接口状态
                            "msg": res.message, //解析提示文本
                            "count": res.data.total, //解析数据长度
                            "data": res.data.list   //解析数据列表
                        };
                    },
              toolbar: "",
              url: api.host + api.pushPlan01_llp,
              type: 'post',
                where: {
                        type: 'M'
                    },
                cols: [[
                        { type: 'radio', event: 'radio' }
                            , { type: 'numbers', title: '序号', align: 'center', }
                            , { field: 'tcPlanName', title: '计划名称', align: 'center', }
                            , { field: 'tcPlanCode', title: '计划编号', align: 'center', }
                        ]],
            })
          );
          form.on("submit(queryTableDeviceHeader)", function (data) {
            var allData = data.field;
            table.reload("#table-device-alert", {
              where: allData
            });
            return false;
          });
          utill.keyup('.searchInput', '.search-blank-icon');
          form.on("submit(queryTableDevice)", function (data) {
            var res = table.checkStatus("#table-device-alert").data;
            let id = res[0].tcPlanId;
            let name = res[0].tcPlanName;
            $("#MaintenancePlan").val(name);
            $("#MaintenancePlan").attr('data-id',id);
            comment(layui.api.host + '/plan/getMpidByDeaid1.json', 'post', id, function (res) {
                                let planDetails = res.data.planDetails // 表格数据
                                let planid = res.data.planid // 头部信息 
                                let table = `<tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td>
                                        <table class="nextTable">
                                            <thead>
                                                <tr style="width: 100%;">
                                                    <td class="t">项目名称</td>
                                                    <td class="t">保养部位</td>
                                                    <td class="t">保养说明</td>
                                                    <td class="t">相关文档</td>
                                                    <td class="t">是否完成</td>
                                                    <td class="t">保养结果</td>
                                                </tr>
                                            </thead>
                                        </table>
                                    </td>
                                </tr>`;
                                $('.box li:eq(0)').find('div:eq(0) span').html(planid.tcPlanName).parents('li')
                                    .next().children('div').eq(0).find('span').html(planid.gen02).parents('li').next().children('div').eq(0).html(`位置范围：<span>${planid.tcPlanArea}</span>`)
                                    .next().html(`巡检说明：<span>${planid.tcPlanDsc}</span>`)
                                planDetails.forEach(item => {
                                    let nextTable = ''
                                    item.mtProject.forEach(elem => {
                                        nextTable += `<table class="nextTable" style="width: 100%;">
                                            <tbody>
                                                <tr style="width: 100%;">
                                                    <td class="t1">${elem.tcMaintName || ''}</td>
                                                    <td class="t1">${elem.tcMaintPart || ''}</td>
                                                    <td class="t1">${elem.tcMaintDsc || ''}</td>
                                                    <td class="t1"></td><td class="t1"></td><td class="t1"></td>
                                                </tr>
                                            </tbody>
                                        </table>`
                                    })
                                    table += `<tr>
                                                <td>${item.fia01 || ''}</td>
                                                <td>${item.fia02 || ''}</td>
                                                <td>${item.fic02 || ''}</td>
                                                <td>${item.pmc03 || ''}</td>
                                                <td>${item.tcSeriesName || ''}</td>
                                                <td>${item.fii02 || ''}</td>
                                                <td>
                                                    ${nextTable}
                                                </td>
                                            </tr>`

                                })
                                $('.layui-table tbody').html(table)
                            }, true);
                        layer.close(layer.index);
                        return false;
                    });
                $('.btn2').click(function(){
                    layer.close(layer.index);
                });
                
                $('.submit').click(function () {
                    var times1 = $('#startTime').val();
                    var times2 = $('#endTime').val();
                    if (times1 != "" && times2 != "") {
                        let _this = this
                        let params = {
                            "fil12": $('#startTime').val(),
                            "fil13": $('#endTime').val(),
                            "tcReqPlan": $('#MaintenancePlan').data('id')
                        }
                        comment(layui.api.host + '/order/insertMaintain.json', 'post', params, function (res) {
                            if (res.code == 0) {
                                layer.msg(res.message);
                                $('.cancel').click();
                                //再一次渲染表格
                                table.render();
                            } else {
                                layer.msg('新增失败')
                            }
                        }, true)
                    } else {
                        layer.msg("请将时间填写完整");
                    }

                })
                
            }
        }   
        $("#MaintenancePlan").click(function(){
                layer.open({
                type: 1,
                title: false,
                area: ["662px", "536px"],
                fixed: true,
                shadeClose: true,
                closeBtn: 0,
                content: $("#addDeviceTpl").html(),
                success: alertEvent.addDevice
                });
            });
        // 取消按钮事件
        $('.cancel').attr('lay-href', 'maintain/cash');
    })
</script>